<template>
  <div class="page">
    <!--    //需要根据 课程状态判断是否显示-->

    <div class="bgf" style="padding: 30rpx 40rpx">
      <div style="color: pink">请求接口状态判断是否显示</div>
      <h2 style="color: #007aff">岗前能力认证</h2>
      <div>您需要按照指引完成以下任务，感谢您的配合！</div>
    </div>
    <div class="f bgf ac xb w100 mt20r">
      <img src="" alt="图片占位" style="height: 200rpx; width: 200rpx" />
      <div class="f cn f1 ml20r" style="padding: 10rpx 0">
        <div class="fs40r b">?????培训</div>
        <div class="f ac">
          <div class="ga0">时长：</div>
          <div>180分钟</div>
        </div>
        <div class="f ac">
          <div class="ga0">期限：</div>
          <div>无</div>
        </div>
        <div class="f ac">
          <div class="ga0">状态：</div>
          <div style="color: #007aff">未参加</div>
        </div>
      </div>
    </div>
    <div class="bgf mt20r w100 borderBox" style="padding: 20rpx 5rpx">
      <div class="f ac mb20r">
        <div
          style="width: 8rpx; height: 30rpx; background-color: #007aff"
        ></div>
        <div class="b ml10r">测评简介：</div>
      </div>
      <div style="padding: 10rpx 5rpx">
        请新技师学习《服务态度及高压红线培训》课程后，完成相应考试，方可上线接单。
      </div>
    </div>
    <div class="bgf mt20r w100 borderBox f ac xb" style="padding: 20rpx 5rpx">
      <div>
        <div class="f ac mb20r">
          <div
            style="width: 8rpx; height: 30rpx; background-color: #007aff"
          ></div>
          <div class="b ml10r">学习课程：</div>
        </div>
        <div style="padding: 10rpx 5rpx; color: #007aff">
          服务态度及高压红线培训
        </div>
      </div>
      <div
        @click="goStudy"
        style="background-color: #007aff; width: 100rpx; height: 100rpx"
        class="gf rds15r f xc ac mr20r"
      >
        点击
        <br />
        学习
      </div>
    </div>
    <div class="bgf mt20r w100 borderBox" style="padding: 20rpx 5rpx">
      <div class="f ac mb20r">
        <div
          style="width: 8rpx; height: 30rpx; background-color: #007aff"
        ></div>
        <div class="b ml10r">通过标准：</div>
      </div>
      <div class="f ac ml10r">
        <div class="ga0">及格分数：</div>
        <div>80分（总分100分）</div>
      </div>
      <div class="f ac mt10r ml10r">
        <div class="ga0">奖励积分：</div>
        <div>8分</div>
      </div>
    </div>
    <button
      @click="goQuestion"
      class="fixed w90 b9 l50"
      style="
        background-color: #007aff;
        color: white;
        transform: translateX(-50%);
      "
    >
      进入
    </button>
    <div class="" style="padding: 20rpx">
      <button
        @click="check"
        class="fixed w90 b2 l50"
        style="
          background-color: #007aff;
          color: white;
          transform: translateX(-50%);
        "
      >
        开始考核
      </button>
    </div>
    <u-modal
      :show="show"
      title="温馨提示"
      content="您需要先学习完课程成后才能开始考试"
      confirmText="开始学习"
      :closeOnClickOverlay="true"
      @close="show = false"
      @confirm="goStudy"
    ></u-modal>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      show: false,
    };
  },
  computed: {},
  mounted() {
    //
  },
  onLoad(){
    wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
  },
  methods: {
    check() {
      // if (){}
      this.show = true;
    },
    goStudy() {
      uni.navigateTo({
        url: "/pages/webView/index",
      });
    },
    goQuestion() {
      uni.navigateTo({
        url: "/pages/authentication/testQuestions",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx;
  background-color: #f5ecf3;
  min-height: 100vh;
}
</style>
